<template>
	<view class="topic">
		<view class="list-box" v-for="(item, index) in topicData" :key="index">
			<!-- 图片 -->
			<image :src="item.scene_pic_url" mode="widthFix" class="pic"></image>
			<!-- 标题 -->
			<view class="title">{{ item.title }}</view>
			<!-- 附标题 -->
			<view class="tip">{{ item.subtitle }}</view>
			<!-- 价格 -->
			<view class="price">{{ item.price_info | priceFormat }}</view>
		</view>
		<!-- 分页器 -->
		<uni-pagination showIcon="false" :total="count" :current="currentPage" @change="change"></uni-pagination>
		<tab></tab>
	</view>
</template>

<script>
import tab from '@/custom-tab-bar/index.vue';
import { mapMutations } from 'vuex';
import { ApiGetTopicData } from '@/utils/api.js';
//引入分页器
import uniPagination from '../../components/uni-pagination/components/uni-pagination/uni-pagination.vue';
export default {
	data() {
		return {
			count: 0, //总专题数
			currentPage: 0, //当前页数
			totalPages: 0, //总页数
			topicData: [] //专题数组
		};
	},
	onShow() {
		this.changevalue(1);
	},
	async onLoad() {
		this.getData({
			page: 1,
			siez: 10
		});
	},
	methods: {
		...mapMutations(['changevalue']),
		change(e) {
			console.log('当前页面类型' + e.type, '当前页为:' + e.current);
			let pageNum = e.current;
			this.getData({
				page: pageNum,
				size: 10
			});
		},
		async getData(parmas) {
			let res = await ApiGetTopicData(parmas);
			if (res.errno !== 0) return;
			let { count, currentPage, totalPages, data } = res.data;
			this.count = count; //总行数
			this.currentPage = currentPage; //当前页
			this.totalPages = totalPages; //总页数
			this.topicData = data; //主体列表
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		}
	},
	components: {
		tab,
		uniPagination
	}
};
</script>

<style lang="scss">
.topic {
	padding-bottom: 200rpx;
	background-color: #efefef;
	// 产品列表盒子
	.list-box {
		// height: 636rpx;
		background-color: #fff;
		text-align: center;
		padding-bottom: 20rpx;
		margin-bottom: 40rpx;
		.pic {
			width: 100%;
		}
		.title {
			font-family: '黑体';
			font-size: 36rpx;
			height: 36rpx;
			margin: 20rpx 0;
			color: #333333;
		}
		.tip {
			font-family: '黑体';
			font-size: 32rpx;
			height: 32rpx;
			margin: 40rpx 0;
			color: #1f1f1f;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.price {
			font-family: '黑体';
			height: 28rpx;
			font-size: 28rpx;
			color: #9b0000;
			margin-bottom: 20rpx;
		}
	}
}
</style>
